	<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<title>分类列表</title>
	</head>

	<body>
		<div id="app">
			<div class="top" id="topBar">
				<p>分类</p>
			</div>
			<div id="container" class="inlinkFlex" v-cloak>
				<div class="leftbar">
					<p class="barItem" v-for="categoryItem in categoryList" :class="{active:bar === categoryItem.Category.TopNum}" @click="onBar(categoryItem.Category.TopNum)">{{categoryItem.Category.TopText}}</p>
				</div>
				<div class="rightContent" v-cloak>

					<div v-show="bar === 'one'">
						<div class="categoryItem inlinkFlex" v-for="oneItem in oneList.OneProduct">
							<a href="detail.html" class="inlinkFlex" style="width: 100%;">
								<div class="shopImg">
									<img v-lazy="oneItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p v-text="">{{oneItem.GoodsName}}</p>
									<p class="shopIntro">{{oneItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{oneItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
					<div v-show="bar === 'two'">
						<div class="categoryItem inlinkFlex" v-for="twoItem in twoList.TwoProduct">
							<a href="detail.html" class="external inlinkFlex">
								<div class="shopImg">
									<img v-lazy="twoItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p>{{twoItem.GoodsName}}</p>
									<p class="shopIntro">{{twoItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{twoItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
					<div v-show="bar === 'three'">
						<div class="categoryItem inlinkFlex" v-for="threeItem in threeList.ThreeProduct">
							<a href="detail.html" class="external inlinkFlex">
								<div class="shopImg">
									<img v-lazy="threeItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p>{{threeItem.GoodsName}}</p>
									<p class="shopIntro">{{threeItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{threeItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
					<div v-show="bar === 'four'">
						<div class="categoryItem inlinkFlex" v-for="fourItem in fourList.FourProduct">
							<a href="detail.html" class="external inlinkFlex">
								<div class="shopImg">
									<img v-lazy="fourItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p>{{fourItem.GoodsName}}</p>
									<p class="shopIntro">{{fourItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{fourItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
					<div v-show="bar === 'five'">
						<div class="categoryItem inlinkFlex" v-for="fiveItem in fiveList.FiveProduct">
							<a href="detail.html" class="external inlinkFlex">
								<div class="shopImg">
									<img v-lazy="fiveItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p>{{fiveItem.GoodsName}}</p>
									<p class="shopIntro">{{fiveItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{fiveItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
					<div v-show="bar === 'six'">
						<div class="categoryItem inlinkFlex" v-for="sixItem in sixList.SixProduct">
							<a href="detail.html" class="external inlinkFlex">
								<div class="shopImg">
									<img v-lazy="sixItem.GoodsImage" />
								</div>
								<div class="shopText">
									<p>{{sixItem.GoodsName}}</p>
									<p class="shopIntro">{{sixItem.GoodsInfo}}</p>
									<p class="shopCoach">¥ {{sixItem.GoodsPrice}}</p>

								</div>
							</a>

						</div>
					</div>
				</div>
			</div>
			#include("../pages/common/footer.html")
			<!--提示成功弹窗-->
			<div class="model" v-show="successModel" v-cloak>
				<div class="model-content tip-content">
					<p>添加成功</p>
					<p @click="successModel=false">确定</p>
				</div>
			</div>

</div>
</body>
</html>
